<template>
  <!-- 举报管理 -->
  <el-dialog
    :modal="false"
    title="违规信息"
    :visible.sync="dialogVisible"
    width="32%"
  >
    <div slot="title" class="titletitle">问题反馈</div>
    <div class="gerenBox">
        <div class="report">
            <el-input class="textarea" type="textarea" v-model="wtfkText" maxlength="300" show-word-limit autosize></el-input>
            <div class="tupian">
                <el-upload :action="$upLoad"
                ref="uupload" 
                list-type="picture-card"
                :limit="6"
                :accept="$imgSuffixArr.join(',')"
                :before-upload="beforeUpload"
                multiple 
                :on-exceed="handleExceed" 
                :on-success="houseSuccess" 
                :on-remove="houseRemove">
                  <i class="el-icon-plus" ></i>
                </el-upload>
                <!-- <el-dialog :visible.sync="dialogVisible">
                <img width="100%" style="object-fit: contain;background-color: #00000033;" :src="dialogImageUrl" alt/>
                </el-dialog> -->
                    </div>
            <div class="problemFK" @click.stop="submitProblem">提交反馈</div>
        </div>
    </div>
    <!-- <floor></floor> -->
  </el-dialog>
</template>
<script>

export default {
 
  name: "report",
  props: ["bUserId", "businessType"],
  data() {
    return {
      dialogVisible: false,
      xuan: 6,
      leibie: 0,
      user: {},
      myJubaoPage: {
        pageNo: 1,
        pageSize: 2,
        userId: "",
      },
      myjbList: [],
      myjbtotal: 0,
      juBaoMyPage: {
        pageNo: 1,
        pageSize: 2,
        userId: "",
      },
      juBaoMytotal: 0,

      houseImage:[],
      dialogImageUrl: "",
      wtfkText:'',      
    };
  },
  watch: {
    bUserId(newV, oldV) {
      if (newV != "") {
        this.myjbList = [];
        this.getUser();
        if (JSON.parse(localStorage.getItem("userInfo")).id == newV) {
          //
          // this.getMyReportRecord()
          this.leibieClick(1, true);
        } else {
          // 跟自己无关的
          this.juBaoMyPage.userId = newV;
          this.leibieClick(0, true);
          // this.getReportMyRecord()
        }
      }
    },
  },
  created() {
    // this.juBaoMyPage.userId = this.bUserId
    // this.getReportMyRecord()
  },
  methods: {
    previewImg(item, index) {
      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index, // 多图预览，默认展示第二张图片
        imgList: item.image, // 需要预览的多图数组
      });
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        return true
      } else {
        this.loginstate = false;
        this.$message({
          message: "请登录！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
        return false
       
      }
    },
    open(opt){
        if(this.getUser()){
            this.dialogVisible = true;
        } 
    },
    //举报我的
    getReportMyRecord() {

      
     
      this.$getHttp("/mob/user/getReportMyRecord", {
        ...this.juBaoMyPage,
        businessType: this.businessType || 1,
      }).then((data) => {
        if (data.code == 200) {
          // 图片处理
          data.page.list.forEach((el) => {
            if (el.image) {
              el.image = el.image.split("|");
            }
          });
          this.myjbList = data.page.list;
          this.juBaoMytotal = data.page.count;
        }
      });
    },

    myjbCurrentChange(e) {
      this.myJubaoPage.pageNo = e;
      this.getMyReportRecord();
    },

    beforeUpload(file, fileList) {
		if (file.size / (1024 * 1024) > 20) { // 限制文件大小
			this.$message.warning(`当前限制文件大小不能大于20M`)
			return false
		}
		let suffix = file.name.substring(file.name.lastIndexOf(".") + 1); //获取文件后缀名
		let suffixArray = ["jpg", "png", "jpeg", "gif"] //限制的文件类型，根据情况自己定义
		if (suffixArray.indexOf(suffix.toLowerCase()) === -1) {
			this.$message({
				message: "文件格式错误",
				type: "error",
				duration: 2000
			})
			return false
		 }
		return true
	},
     handleExceed(files, fileList) {
		this.$message.warning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + this.houseImage.length} 个文件`);
	},
    	houseSuccess(response, file, fileList) {
		this.houseImage.push({
			id: file.uid,
			path: response.data[0].url,
		})
	},
        houseRemove(file, fileList) {
		for (var i = 0; i < this.houseImage.length; i++) {
			if (this.houseImage[i].id == file.uid) {
				this.houseImage.splice(i, 1)
			}
		}
	},
     submitProblem(){
      if (!this.wtfkText || this.wtfkText == "") {
        this.$message({
            message: "请先输入文字！",
            type: "error",
            offset: 120,
            duration: 2000,
          });
        return;
      }
      let data = {
        feedbackPerson: JSON.parse(localStorage.getItem("userInfo")).id,
        content: this.wtfkText,
        feedbackPicture: this.houseImage.map(item=>item.path).join("|")
      };
      console.log(data);
      // return;
      if(this.loading){
        return
      }
      this.loading = true
      this.$postHttp("/api/mobile/public/increaseProblemFeedback", data).then(res => {
        if (res.code == 200) {
          
          this.$message({
            message: "反馈成功！",
            type: "success",
            offset: 120,
            duration: 2000,
          });
          setTimeout(()=>{
            
            this.resetData()
            this.loading = false
            this.dialogVisible = false
          },100)
          // this.leibieClick(2) 
        }else{
          this.loading = false
        }
      });
    },
    resetData(){
      this.wtfkText=''
      this.houseImage=[]

      this.$refs.uupload.clearFiles()
    }
  },
};
</script>
<style lang="less" scoped>
.titletitle{
    color: #333;
    padding-top: 36px;
    font-size: 22px;
    font-weight: 500;
    padding-left: 20px;
    margin-bottom: -20px;
}

.box {
  position: relative;
  padding-bottom: 200px;
}
.con {
  display: inline-block;
  box-sizing: border-box;
  vertical-align: top;
  width: 100%;
  color: #333;
  border: 1px solid #e0e0e0;
  .leibie {
    position: relative;
    width: 100%;
    height: 80px;
    border-bottom: 1px solid #e0e0e0;
    .anniu {
      position: absolute;
      left: 34px;
      bottom: 28px;
      div {
        display: inline-block;
        margin-right: 54px;
        font-size: 20px;
        cursor: pointer;
      }
      .xuan {
        transform: scale(1.2);
        color: #64b6a8;
      }
    }
    span {
      display: inline-block;
      position: absolute;
      width: 70px;
      height: 34px;
      background: #e0e0e0;
      border-radius: 22px;
      text-align: center;
      line-height: 34px;
      color: #333;
      top: 22px;
      right: 20px;
      cursor: pointer;
    }
  }
  .list {
    // margin-top: 33px;
    .li {
      width: 100%;
      min-height: 142px;
      // height: 260px;
      border-bottom: 10px solid #f2f2f2;
      div {
        margin-left: 32px;
        p {
          display: inline-block;
          vertical-align: top;
          font-size: 18px;
          margin-top: 12px;
        }
      }
    }
  }
  .fenye {
    width: 100%;
    margin: 16px 0;
    /* height: 50px; */
    text-align: center;
    /* margin-top: 50px; */
    /* margin-bottom: 30px; */
  }
  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #64b6a8;
  }
}
.gerenBox {
  width: 100%;
  margin-left: 50%;
  transform: translateX(-50%);
  // margin-top: 32px;
  // margin-bottom: 45px;
  .geren {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    width: 240px;
    min-height: 820px;
    margin-right: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    img {
      width: 110px;
      height: 110px;
      border-radius: 50%;
      margin-top: 40px;
      margin-left: 65px;
    }
    p {
      width: 100%;
      text-align: center;
      font-size: 18px;
      color: #333333;
      margin-top: 12px;
      margin-bottom: 40px;
    }
    .list {
      position: relative;
      width: 100%;
      .li {
        width: 209px;
        height: 50px;
        line-height: 50px;
        margin-left: 30px;
        text-indent: 40px;
        font-size: 18px;
        color: #333;
        border-radius: 25px 0 0 25px;
        cursor: pointer;
        p {
          display: inline-block;
        }
      }
      .xuan {
        background-color: #64b6a8;
        color: #fff;
      }
    }
    .kuai {
      width: 100%;
      height: 6px;
      background-color: #64b6a8;
      position: absolute;
      bottom: 0;
    }
  }
}

.tit {
  width: 100%;
  height: 100px;
  background-color: #f2f2f2;
  .list {
    position: relative;
    width: 1200px;
    margin-left: 50%;
    padding-top: 25px;
    transform: translateX(-50%);
    background-color: #f2f2f2;
    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
    }
    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;
      img {
        width: 60px;
        height: 60px;
      }
      span {
        vertical-align: middle;
      }
    }
    .rig {
      position: absolute;
      right: 0;
      .sousuo {
        position: relative;
        display: block;
        width: 380px;
        height: 50px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;
        display: inline-block;
        input {
          width: 300px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }
        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }
        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
          color: #ffffff;
        }
      }
      .but {
        width: 200px;
        height: 50px;
        background: #64b6a8;
        border-radius: 6px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        margin-left: 30px;
      }
    }
  }
}
.report{
    display: flex;
    flex-direction: column;
    .textarea{
        // width: 865px;
        margin: 0 auto;
        margin-top: 25px;
        /deep/.el-textarea__inner {
            // width: 865px;
            min-height: 130px !important;
            line-height: 25px;
            outline: none;
            padding: 10px 13px 30px 13px;
            overflow-y: visible;
        }
    }
    .selects{
        width: 130px;
        margin-top: 35px;
        margin-left: 35px;
    }
    .tupian{
        // width: 865px;
        // margin: 0 auto;
        margin-top: 25px;
    }
    .problemFK{
      cursor: pointer;
        width: 300px;
        height: 60px;
        background: #64B6A8;
        border-radius: 6px;
        font-size: 24px;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0 auto;
        text-align: center;
        line-height: 60px;
        margin-top: 36px;
        margin-bottom: 36px;
    }
    .report_item{
        width: 100%;
        box-sizing: border-box;
        padding: 25px 35px;
        border-bottom: 10px solid #f2f2f2;
        .text{
            font-size: 18px;
            font-weight: 400;
            color: #333333;
        }
        .time{
            text-align: right;
            margin-top: 10px;
            font-size: 15px;
            font-weight: 400;
            color: #333333;
            
        }
    }
}
/deep/.el-dialog {
  margin-top: 15vh !important;
}
</style>
